<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>table切换</title>
	<style type="text/css">
        #box{width: 300px;
             height: 200px;
             margin: auto;
             border: #ccc solid 1px;            
        }
        ul{
        	width: 200px;
        	height: 30px
        }
        li{list-style: none;
        	float: left; 
        	padding-left: 10px         
        }
        p{display:none}


	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
	  $(function(){
	  	      
		            $("#box ul li").click(function(){
			            	clearInterval(time);
			        	  $("p").css("display","none ")
			              $("p").eq($(this).index()).css("display","block")
		            }) 
	           
	            
	                var i=0;	         
		            var time=setInterval(function(){
		           	
			              $("p").css("display","none ")
			              $("p").eq(i).css("display","block")
			              i++;
			              if (i==$("p").length) {
			              	i=0;
			              } 

		            },1000)

		           $("#box").mouseleave(function(){	            
                          var time=setInterval(function(){
		           	       
				              $("p").css("display","none ")
				              $("p").eq(i).css("display","block")
				              i++;
				              if (i==$("p").length) {
				              	i=0;
				              } 

		                  },1000)  

		                   $("#box ul li").click(function(){
			            	clearInterval(time);
			        	  $("p").css("display","none ")
			              $("p").eq($(this).index()).css("display","block")
		            }) 
	            
	        	 
	                })
             

	  })
         


	</script>
</head>
<body>
    <div id="box">
    	<ul>
    		<li>第一节</li>
    		<li>第二节</li>
    		<li>第三节</li>
    		<div class="clear"></div>
    	</ul>
    	<p style="display:block">语文</p>
    	<p>数学</p>
    	<p>体育</p>
    </div>
</body>
</html>
